<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { index_api } from "@/package/other/api/help_center";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";

onLoad((options) => {
  useQuery<{ id: string; name: string }>(
    options as MiniApp.AppLaunchOption,
    (query) => {
      index_api({
        id: query.id,
        package_name: AppData.bundleData.bundleName,
        platform: 3,
      }).then((resp) => {
        listData.value = resp.items;
      });

      uni.setNavigationBarTitle({ title: decodeURIComponent(query.name) });

      shareOption.title = query.name;
      shareOption.data = { id: query.id, name: query.name };
    }
  );
});

const listData = ref<any[]>([]);
const detailClick = (index: number) => {
  const item = listData.value[index];
  Router.navigateTo(
    `/package/other/pages/question/detail?${Router.dataToQuery({
      id: item.id,
      name: item.title,
    })}`
  );
};

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/other/pages/question/list"
);
</script>

<template>
  <view class="list-data">
    <view
      class="list-data-item"
      v-for="(i, d) of listData"
      :key="i.id"
      @click="detailClick(d)"
    >
      <view class="list-data-name">{{ i.title }}</view>
      <image
        class="list-data-arrow"
        src="@/package/other/static/question-arrow.png"
      />
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
  background-color: #ffffff;
}

.list-data {
  padding-bottom: 40rpx;

  .list-data-item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 100rpx;
  }

  .list-data-name {
    flex-grow: 1;
    min-width: 0;
    font-size: 30rpx;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .list-data-arrow {
    flex-shrink: 0;
    margin-left: 20rpx;
    width: 24rpx;
    height: 24rpx;
  }
}
</style>